import { Canvas } from "@react-three/fiber";
import {
  Box,
  Billboard,
  Text,
  CameraControls,
  PivotControls,
} from "@react-three/drei";
import { useComputeSomething } from "./store";

export const Visual = () => {
  const result = useComputeSomething((state) => state.result);

  return (
    <Canvas
      style={{ width: "600px", height: "600px" }}
      onContextMenu={(e) => e.preventDefault()}
      shadows
      camera={{ position: [-3, 0.5, 3] }}
    >
      <PivotControls anchor={[-1.1, -1.1, -1.1]} scale={0.75} lineWidth={3.5}>
        <Billboard follow position={[0.5, 2.05, 0.5]}>
          <Text
            fontSize={1}
            outlineColor="#000000"
            outlineOpacity={1}
            outlineWidth="5%"
          >
            {result}
          </Text>
        </Billboard>
        <Box>
          <meshBasicMaterial wireframe />
        </Box>
      </PivotControls>
      <CameraControls makeDefault />
    </Canvas>
  );
};
